<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>注册页面</title>
    <div th:include="common :: headcommon"></div>
    <script th:src="@{/js/index/register.js}" type="text/javascript"></script>

</head>
<body>
<div th:replace="common :: #top_start"></div>

<div class="layui-container container layui-layer-border back  ">
    <h2 class="register-title">注册信息</h2>
    <div class="register ">

        <form class="layui-form "  >
            <div class="layui-form-item">
                <label class="layui-form-label">用户账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="uname" required lay-verify="uname" placeholder="请输入用户账号"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">用户名格式：4到10位，由大小写字母和数字组成</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="password" placeholder="请输入密码"
                           autocomplete="off" class="layui-input" id="password">
                </div>
                <div class="layui-form-mid layui-word-aux">密码格式：至少6位，英文与数字组成</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="repassword" required lay-verify="repassword" placeholder="确认密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户昵称</label>
                <div class="layui-input-inline">
                    <input type="text" name="news_name" required  placeholder="请输入个人昵称"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked>
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="tel" name="telephone" required lay-verify="tel" placeholder="请输入个人手机号"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="email" required lay-verify="required" placeholder="请输入个人邮箱"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="checkcode" required lay-verify="checkcode" placeholder="请输入验证码"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <img src="/user/register/checkCode" onclick="changeCheckCode(this)" alt="更换验证码">
                    <!--                    更换验证码-->
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src = "/user/register/checkCode?" + new Date().getTime();
                        }
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" lay-submit lay-filter="register">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
<!--    <script >-->
<!--        layui.use(['form'],function (){-->
<!--            var form = layui.form;-->

<!--//    自定义验证规则-->
<!--            form.verify({-->
<!--                uname:function (value){-->
<!--                    //用户名正则，4到10位（字母，数字，下划线）-->
<!--                    let reg_uname =/^[a-zA-Z0-9]{4,10}$/;-->
<!--                    if (!reg_uname.test(value)){-->
<!--                        return "用户名格式不正确,请重新输入";-->
<!--                    }-->
<!--                },-->
<!--                password:function (value){-->
<!--                    var uname=value;-->
<!--                    // 密码（最少6位，包括至少，一位字母，一个数字）：-->
<!--                    var reg_uname= /(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d$@!%*#?&]{6,}$/;-->
<!--                    if (!reg_uname.test(uname)){-->
<!--                        return "密码格式不正确，请重新输入";-->
<!--                    }-->

<!--                },-->
<!--                repassword:function (value){-->
<!--                    var getname=$("#password").val();-->
<!--                    if (value!=getname){-->
<!--                        return "确认密码错误，请重新输入";-->
<!--                    }-->
<!--                },-->
<!--                tel:function (value){-->
<!--                    // 指定手机号格式-->
<!--                    let reg_tel=/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;-->
<!--                    if (!reg_tel.test(value)){-->
<!--                        return "手机号格式错误，请重新输入";-->
<!--                    }-->
<!--                },-->
<!--                checkcode:function (value){-->
<!--                    //验证码为四位-->
<!--                    let reg_verify=/^\w{4}$/;-->
<!--                    if (!reg_verify.test(value)){-->
<!--                        return "输入有误，验证码只能为四位";-->
<!--                    }-->
<!--                }-->
<!--            });-->
<!--            form.on('submit(register)',function (){-->
<!--                layer.msg("成功了");-->
<!--            })-->
<!--        });-->

<!--    </script>-->


</div>


<!--<div class="footer1 bottom-item">-->
<!--    <hr class="layui-bg-red">-->
<!--    <p><a href="#">新闻发布网站</a> 2021 &copy; <a href="#">The News Release System </a></p>-->
<!--</div>-->
<div th:replace="common :: #foot_start"></div>

</body>
</html>